<template>
  <div class="home">
    <div style="padding-bottom:50px">
      <router-link :to="{name:'theme',query:{name:'t-1'}}">
        <div class="theme">
          <img class="theme-img" :src="topImg">
        </div>
      </router-link>
    <div>
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in imgList" :key="index">
          <img :src="image.img" class="theme-img"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <van-grid class="gird" :column-num="3" :border="false">
        <van-grid-item v-for="item in categorylist" :key="item.id" class="iconfont"
        :text="item.name" :class="item.img" style="font-size:30px"
        :to="{name:'categoryList',query:{id:item.id,isRoot:true}}"/>
      </van-grid>
    </div>
    <goods-list ref="goodsList"></goods-list>
    </div>
      <navBar></navBar>
  </div>
</template>

<script>
import GoodsList from './GoodsList.vue';
export default {
  props: {
  },
  components: {
    GoodsList
    
  },
  data() {
    return {
      topTitle:'',
      topName:'',
      topImg:'',
      imgList:[],
      categorylist:[],
    };
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.getImg()
    this.getGridMenu()
  },
  methods:{
      getImg(){
        this.$http.get('/api/theme/detail/t-1').then(
          response=>{
            console.log('1',response.data)
            this.topName=response.data.name
            this.topTitle=response.data.title
            this.topImg=response.data.entranceImg
          },
          error=>{
            console.log(error)
          }
        )
        this.$http.get('/api/poster/name/p-1').then(
          response=>{
            console.log('2',response.data)
            this.imgList=response.data.items
            console.log(this.imgList)
          },
          error=>{
            console.log(error)
          }
        )
      },
      getGridMenu(){
        this.$http.get('/api/category/grid').then(
          response=>{
            console.log('3',response.data)
            this.categorylist=response.data
          },
          error=>{
            console.log(error)
          }
        )
      }
  },
};
</script>
<style scoped lang="less">
.home{
  background: rgb(229, 223, 211);
  .theme{
    height: 180px;
  }
  .theme-img{
    max-height: 100%;
    width:100%
  }
  .gird{
    background: white;
    border-radius: 10px;
    border:2px solid rgb(60, 41, 46);
    padding-top: 13px;
    margin: 5px 5px;
    height: 140px;
    .iconfont{
      color:rgb(111, 139, 145);
      width: 2em;
      height: 0em;
    }
  }
}
</style>